<script setup lang="ts">
	import { ref, reactive, onMounted,watch} from "vue";
	defineOptions({
		name: "SearchSelect"
	});
	const emits = defineEmits([
		"confirm",
	]); // 此处需写'update'
	const props = defineProps({
		/* 选中值 */
		modelValue: {
			required: true,
			default() {
				return "";
			}
		},
		/* 下拉数据 */
		tenantList: {
			required: true,
			default() {
				return [];
			}
		},
	});
	watch(
	  () => props.modelValue,
	  (newVal:any, oldVal:any) => {
		select_data.value=newVal;
	  },
	)
	// watch(
	//   () => props.tenantList,
	//   (newVal:any, oldVal:any) => {
	// 	select_data.selectList=newVal;
	//   },
	// )
	const select_data = reactive({
		selectList:[] as any,
		status: false, //下拉框主体是否显示
		value: '', //下拉框选中值
	});

	const searchSelect = ref(); //下拉框总体实例

	/* 下拉框body显示 */
	const showSelect = () => {
		select_data.selectList=!!select_data.value?props.tenantList.filter((x:any)=>x==select_data.value):props.tenantList;
		select_data.status = select_data.selectList.length>0;
		emits('confirm',select_data.value);
	};

	/* 下拉框子项点击 */
	const rowConfirm = (row:any) => {
		select_data.value = row;
		// emits("update:modelValue", row[props.props.key]);
		select_data.status = false;
		emits('confirm',select_data.value);
	};

	// /* 输入框改变 防抖 */
	// const inputChange = debounce(() => {
	// 	emits("inputChange", select_data.inputVal);
	// }, 500);

	/* 防抖函数 */
	// function debounce(fun, time) {
	// 	let timer;
	// 	return function (...val) {
	// 		clearTimeout(timer);

	// 		timer = setTimeout(() => {
	// 			fun.apply(this, val);
	// 		}, time);
	// 	};
	// }

	/* 生命周期 */
	onMounted(() => {
		document.addEventListener("click", function (event) {
			const dropdown = searchSelect.value;
			const target = event.target;
			if (target !== dropdown && !dropdown?.contains(target)) {
				// 点击的不是下拉框或者下拉框的子元素，关闭下拉框
				select_data.status = false;
			}
		});
	});
</script>

<template>
	<div ref="searchSelect" class="search_select_wrapper">
		<!-- 搜索框 -->
		<el-input ref="searchRef" text placeholder="请选择" v-model="select_data.value"  autocomplete="off" @input="showSelect" @focus="showSelect">
			<template #prefix>
				 <slot name="searchStart"></slot>
			</template>
			<template #suffix>
				<el-icon :class="[ 'search_select_icon',select_data.status ? 'search_select_icon_ok' : '']"><ArrowDown /></el-icon>
			</template>
		</el-input>
		<!-- 搜索列表 -->
		<div v-show="select_data.status" :class="['search_select_list_cont',select_data.status ? 'search_select_list_cont_show' : '']">
			<div  class="search_select_list">
				<div class="search_select_list_scrollbar" v-show="select_data.selectList.length > 0">
					<div v-for="item in select_data.selectList" :key="item" :class="['search_select_list_item',select_data.value == item? 'search_select_list_item_ok': '']" @click="rowConfirm(item)">
						{{item}}
					</div>
				</div>
				<div v-show="select_data.selectList.length <= 0" class="no_list">
					暂无数据
				</div>
			</div>
		</div>
	</div>
</template>

<style lang="scss" scoped>
	.search_select_wrapper {
		width: 100%;
		position: relative;
		font-size: 14px;
		.search_select_icon {
			transition: all 0.3s;
		}
		.search_select_icon_ok {
			transform: rotate(-180deg);
		}
		.search_select_ok {
			border: 1px solid #409eff;
		}

		.search_select_list_cont {
			position: absolute;
			top: 45px;
			left: 0;
			width: 100%;
			background-color: #fff;
			box-sizing: border-box;
			border-radius: var(--el-popper-border-radius);
			border: 1px solid var(--el-border-color-light);
			box-shadow: var(--el-box-shadow-light);
			z-index: 1;

			.search_select_input {
				padding: 5px;
				border-bottom: 1px solid #dcdfe6;

				input {
					outline: none;
					width: 100%;
					height: 30px;
					border-radius: 4px;
					border: 1px solid #dcdfe6;
					padding: 0 5px;
					box-sizing: border-box;
				}

				input:focus {
					outline: none;
					border: 1px solid #409eff;
				}
			}

			.search_select_list {
				height: 230px;
				padding: 5px 0;
				box-sizing: border-box;

				.search_select_list_scrollbar {
					width: 100%;
					height: 100%;
					overflow-y: scroll;
				}

				.search_select_list_scrollbar::-webkit-scrollbar {
					display: none;
				}

				.search_select_list_item {
					padding: 0 15px;
					box-sizing: border-box;
					line-height: 36px;
					cursor: pointer;
				}

				.search_select_list_item:hover {
					background-color: rgba(0, 0, 0, 0.05);
				}

				.search_select_list_item_ok {
					font-weight: 700;
					color: #409eff;
					background-color: #f5f7fa;
				}

				.no_list {
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #909399;
					font-size: 14px;
				}
			}
		}

		.search_select_list_cont_show {
			// transform: translateY(0);
			// opacity: 1;
		}

		.search_select_list_cont::before {
			content: "";
			position: absolute;
			top: -14px;
			left: 50%;
			transform: translateX(-50%);
			width: 0;
			height: 0;
			border: 7px solid;
			border-color: transparent transparent #dcdfe6 transparent;
			z-index: 2;
		}

		.search_select_list_cont::after {
			content: "";
			position: absolute;
			top: -12px;
			left: 50%;
			transform: translateX(-50%);
			width: 0;
			height: 0;
			border: 6.5px solid;
			border-color: transparent transparent #ffffff transparent;
			z-index: 3;
		}
	}
</style>